<template>
	<div>
		<el-dialog title="订单详情" :visible.sync="data.bSwitch" fullscreen width="680px">
			<el-descriptions :column="2">
				<el-descriptions-item label="订单号">{{ infoData.outTradeNo }}</el-descriptions-item>
				<el-descriptions-item label="套系名称">{{ infoData.name }}</el-descriptions-item>
				<el-descriptions-item label="归属地">
					<dict-tag :options="dict.type.template_own_type" :value="infoData.ownType" />
				</el-descriptions-item>
				<el-descriptions-item label="分类">
					<dict-tag :options="dict.type.template_cat_type" :value="infoData.catType" />
				</el-descriptions-item>
				<el-descriptions-item label="人群">
					<dict-tag :options="dict.type.template_user_type" :value="infoData.catType" />
				</el-descriptions-item>
				<el-descriptions-item label="价格">{{ infoData.price / 100 }} 元</el-descriptions-item>
				<el-descriptions-item label="优惠券">
					<!-- 金额券 -->
					<span v-if="infoData.type === 1">{{ infoData.subMoney }} 元</span>
					<!-- 折扣券 -->
					<span v-else-if="infoData.type === 2">{{ infoData.subMoney }} 折</span>
					<span v-else>--</span>
				</el-descriptions-item>
				<el-descriptions-item label="实际支付">
					<span v-if="[1, 2, 3, 4].includes(infoData.status)">{{ infoData.payPrice / 100 }} 元</span>
					<span v-else>--</span>
				</el-descriptions-item>
				<el-descriptions-item label="状态">
					<el-tag size="small" type="info" v-if="infoData.status === 0">待付款</el-tag>
					<el-tag size="small" v-if="infoData.status === 1">已付款</el-tag>
					<el-tag size="small" type="warning" v-if="infoData.status === 2">制作中</el-tag>
					<el-tag size="small" type="success" v-if="infoData.status === 3">已完成</el-tag>
					<el-tag size="small" type="danger" v-if="infoData.status === 4">制作失败</el-tag>
					<el-tag size="small" type="danger" v-if="infoData.status === 5">已退款</el-tag>
				</el-descriptions-item>
				<el-descriptions-item label="创建时间">{{ parseTime(infoData.createDate) }}</el-descriptions-item>
				<el-descriptions-item label="付款时间">{{ infoData.payDate ? parseTime(infoData.payDate) : '--'
					}}</el-descriptions-item>
				<el-descriptions-item label="完成时间">{{ infoData.finishDate ? parseTime(infoData.finishDate) : '--'
					}}</el-descriptions-item>
				<el-descriptions-item label="正面照片" :span="2">
					<div v-if="infoData.frontUrl" style="text-align: center;">
						<el-image style="width: 100px; height: 180px; display: block;"
							:src="infoData.frontUrl + '?style=imageMogr2/thumbnail/1200x'"
							:preview-src-list="[infoData.frontUrl + '?style=imageMogr2/thumbnail/1200x']" fit="contain">
						</el-image>
						<el-link type="primary" @click="onDownLoad(infoData.frontUrl)">下载</el-link>
					</div>
					<span v-else>--</span>
				</el-descriptions-item>
				<el-descriptions-item label="生成照片" :span="2">
					<span v-if="images && images.length">
						<div v-for="(item, index) of images" :key="index"
							style="float: left; text-align: center; margin-right: 10px;">
							<el-image style="width: 100px; height: 180px; display: block;"
								:src="item.url + '?style=imageMogr2/thumbnail/1200x'" :preview-src-list="fileUrls" fit="contain">
							</el-image>
							<el-link type="primary" @click="onDownLoad(item.url)">下载</el-link>
						</div>
					</span>
					<span v-else>--</span>
				</el-descriptions-item>
				<el-descriptions-item label="生成视频" :span="2">
					<span v-if="videos && videos.length">
						<div v-for="(item, index) of videos" :key="index"
							style="float: left; text-align: center; margin-right: 10px;">
							<!-- <video src="item.url" style="width: 100px; height: 180px; display: block;"></video> -->
							<el-link type="primary" @click="onDownLoad(item.url)">下载</el-link>
						</div>
					</span>
					<span v-else>--</span>
				</el-descriptions-item>
			</el-descriptions>
		</el-dialog>
	</div>
</template>

<script>
import { getOrder } from '@/api/order'

export default {
	props: {
		data: {
			type: Object,
			default() {
				return {
					id: null,
					bSwitch: false
				}
			}
		}
	},
	dicts: ['template_cat_type', 'template_own_type', 'template_user_type'],
	data() {
		return {
			infoData: {
				name: null,
				status: null,
				deleted: null,
				ownType: null,
				catType: null,
				userType: null,
				albumNum: null,
				price: null,
				payPrice: null,
				payDate: null,
				finishDate: null,
				createDate: null,
				lastUpdate: null,
				creatorId: null,
				outTradeNo: null,
				frontUrl: null,
				lsideUrl: null,
				rsideUrl: null,
				remark: null,
				files: [],
				photo: {},
			}
		}
	},
	computed: {
		fileUrls() {
			const list = []
			this.infoData.files.map(item => {
				list.push(item.url + '?style=imageMogr2/thumbnail/1200x')
			})
			return list
		},
		images() {
			let list = []
			if (this.infoData.files && this.infoData.files.length) {
				list = this.infoData.files.filter(item => !item.ext.includes('mp4'))
			}
			return list
		},
		videos() {
			let list = []
			if (this.infoData.files && this.infoData.files.length) {
				list = this.infoData.files.filter(item => item.ext.includes('mp4'))
			}
			return list
		}
	},
	created() {
		this.data.id && this.getDetail()
	},
	methods: {
		onDownLoad(url) {
			window.open(url, '_blank')
		},
		// 获取详情
		getDetail() {
			getOrder(this.data.id).then(res => {
				const {
					name,
					status,
					ownType,
					catType,
					userType,
					price,
					payPrice,
					payDate,
					finishDate,
					createDate,
					lastUpdate,
					outTradeNo,
					frontUrl,
					rsideUrl,
					lsideUrl,
					remark,
					files,
					photo
				} = res.data
				this.$set(this.infoData, 'name', name)
				this.$set(this.infoData, 'status', status)
				this.$set(this.infoData, 'ownType', ownType)
				this.$set(this.infoData, 'catType', catType)
				this.$set(this.infoData, 'userType', userType)
				this.$set(this.infoData, 'price', price)
				this.$set(this.infoData, 'payPrice', payPrice)
				this.$set(this.infoData, 'payDate', payDate)
				this.$set(this.infoData, 'finishDate', finishDate)
				this.$set(this.infoData, 'createDate', createDate)
				this.$set(this.infoData, 'lastUpdate', lastUpdate)
				this.$set(this.infoData, 'outTradeNo', outTradeNo)
				this.$set(this.infoData, 'frontUrl', frontUrl)
				this.$set(this.infoData, 'rsideUrl', rsideUrl)
				this.$set(this.infoData, 'lsideUrl', lsideUrl)
				this.$set(this.infoData, 'remark', remark)
				this.$set(this.infoData, 'files', files)
				this.$set(this.infoData, 'photo', photo)
			})
		},
	}
}
</script>

<style lang="scss" scoped>
.demo-ruleForm {
	width: 90%;
}

::v-deep .el-input-number .el-input__inner {
	text-align: left;
	/* 将文本对齐方式改为左对齐，这样数字就不会居中了 */
}

::v-deep .avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.avatar-uploader .el-upload:hover {
	border-color: #409EFF;
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 180px;
	height: 100px;
	line-height: 100px;
	text-align: center;
}

.avatar {
	width: 180px;
	height: 100px;
	display: block;
}

::v-deep .el-upload--picture-card {
	line-height: 98px;
	height: 100px;
	width: 180px;
	background-color: transparent;
}

::v-deep .el-upload-list--picture-card .el-upload-list__item {
	height: 100px;
	width: 180px;
}
</style>